<template>
  <div class="ai-goods">
		<div class="ai-goods-label">-- 推荐商品 --</div>
		<div class="ai-goods-list">
			<van-list
				:error.sync="error"
				:immediate-check="false"
				error-text="请求失败，点击重新加载"
				finished-text=""
				>
				<div class="ai-goods-list-item" v-for="(item, index) in goodsData" :key="index">
					<div class="img-wrapper">
						<img :src="item.image" alt="">
					</div>
					<div class="info-wrapper">
						<div class="">
							<p class="title title_box">{{item.title}}</p>
							<p class="sku_value title_box">{{item.sku_props_value}}</p>
						</div>
						<div class="price-info">
							<div class="price" v-html="scaleGoodsPriceFn(item.price)"></div>
							<div class="shop-car" @click="handleClickBuyNow(item.item_id, item.sku_props)">立即购买</div>
						</div>
					</div>
				</div>
			</van-list>
			<div class="cart-btn-box" @click="handleClickAddCar">一键加入购物车</div>
		</div>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import Store from '@/utils/store'
import { scaleGoodsPrice } from '@/utils/index'
import { skinAddCart } from '@/api/dz/aiDzApi'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
	name: 'index',
	props: {
		goodsData: {
			type: Array // 传入参数的类型
		},
		detection_item_id: {
			type: String // 传入参数的类型
		}
	},
	data() {
    return {
			loading: false,
      error: false,
    }
	},
	methods: {
			/**
		 * 商品价格 整数放大
		 */
		scaleGoodsPriceFn(price, className) {
			return scaleGoodsPrice(price, className)
		},
		/**
		 * 立即购买
		 */
		handleClickBuyNow(item_id, sku_props) {
			// 普通购物模式
			// 跳转到结算
			let orderBuy = {}
			orderBuy.sku = sku_props
			orderBuy.item_id = item_id
			orderBuy.num = 1
			
			orderBuy.type = 'onbuy'
			Store.save('orderBuy', orderBuy)
			this.$JumpName(this, 'buy')
		},
		/**
	 * 加入购物车
	 */
		handleClickAddCar() {
			this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
			skinAddCart({
				detection_item_id: this.detection_item_id
			}).then(res => {
				this.$loadingWrap.close()
				if (res.status == 1) {
					Toast('已加入购物车')
				} else {
					Toast('添加失败：' + res.msg)
				}
			})
		},
	}
}
</script>

<style lang="scss">
.ai-goods{
	padding: 32px;
	color: #fff;
	background: #020B1E;
	&-label {
		font-size: 32px;
		font-weight: 500;
		width: 100%;
		text-align: center;
		margin-bottom: 24px;
	}
	&-list {
		padding: 24px;
		background: #2D3140;
		border-radius: 24px;
		&-item {
			display:flex;
			background: #1F2331;
			border-radius: 24px;
			padding: 24px;
			margin-bottom: 24px;
			.img-wrapper {
					overflow:hidden;
          width:152px;
          height:152px;
					margin-right: 24px;
					img{
            display:block;
            width:100%;
            height:100%;
            border-radius:8px;
          }
			}
			.info-wrapper {
				display:flex;
				flex-direction: column;
				justify-content: space-between;
				flex:1;
				position: relative;
				.title_box {
					white-space: inherit;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					&.title {
						font-size: 28px;
						line-height: 50px;
					}
					&.sku_value {
						color: #d2d2d2;
						font-size: 22px;
					}
				}

				.price-info {
					position: relative;
					color: #fff;
					.price-scale {
						line-height:1;
						color:#fff;
					}
					.shop-car {
						position: absolute;
						right: 0;
						bottom: 0px;
						width: 176px;
						height: 60px;
						background: rgba(1,113,164,1);
						border-radius: 30px;
						text-align: center;
						line-height: 60px;
						font-size: 28px;
						font-weight: 500;
					}
				}
			}
		}
		.cart-btn-box {
			width: 100%;
			height: 96px;
			background: rgba(1,113,164,1);
			border-radius: 48px;
			text-align: center;
			line-height: 96px;
			font-size: 32px;
			font-weight: 500;
		}
	}

}
</style>
